.a-font {
  &__h1 {
    font-size: rem(24);
    font-weight: 600;
    line-height: rem(28);

    @media screen and (min-width: 992px) {
      font-size: rem(34);
      line-height: rem(40);
    }
  }
  &__h2 {
    font-size: rem(21);
    font-weight: 500;
    line-height: rem(24);

    @media screen and (min-width: 992px) {
      font-size: rem(28);
      line-height: rem(34);
    }
  }
  &__h3 {
    font-size: rem(21);
    font-weight: 700;
    line-height: rem(24);

    @media screen and (min-width: 992px) {
      font-size: rem(24);
      line-height: rem(28);
    }
  }
  &__h4 {
    font-size: rem(16);
    font-weight: 600;
    line-height: rem(18);

    @media screen and (min-width: 992px) {
      font-size: rem(18);
      line-height: rem(21);
    }
  }

  &__xl {
    font-size: rem(20);
    font-weight: 500;
    line-height: rem(24);

    @media screen and (min-width: 992px) {
      font-size: rem(24);
      line-height: rem(28);
    }
  }
  &__l {
    font-size: rem(18);
    font-weight: 600;
    line-height: rem(24);

    @media screen and (min-width: 992px) {
      font-size: rem(21);
      line-height: rem(26);
    }
  }
  &__m {
    font-size: rem(14);
    font-weight: 400;
    line-height: rem(18);

    @media screen and (min-width: 992px) {
      font-size: rem(16);
      line-height: rem(20);
    }

    &-m {
      font-weight: 700;

      @media screen and (min-width: 992px) {
        font-size: rem(16);
        line-height: rem(20);
      }
    }
  }

  &__s {
    font-size: rem(12);
    font-weight: 500;
    line-height: rem(16);

    @media screen and (min-width: 992px) {
      font-size: rem(14);
      line-height: rem(18);
    }
  }

  &__xs {
    font-size: rem(10);
    font-weight: 400;
    line-height: rem(14);

    @media screen and (min-width: 992px) {
      font-size: rem(12);
      line-height: rem(16);
    }
  }

  &__nav {
    font-size: rem(18);
    font-weight: 600;

    @media screen and (min-width: 992px) {
      font-size: rem(18);
      line-height: rem(20);
    }
  }

  &__btn {
    &-l {
      font-size: rem(18);
      font-weight: 600;
      line-height: rem(18);
    }

    &-m {
      font-size: rem(14);
      font-weight: 600;
      line-height: rem(14);

      @media screen and (min-width: 992px) {
        font-size: rem(16);
        line-height: rem(16);
      }
    }

    &-s {
      font-size: rem(14);
      font-weight: 700;
      line-height: rem(16);

      @media screen and (min-width: 992px) {
        font-size: rem(14);
        line-height: rem(16);
      }
    }
  }
}
